/**
 * @title 交易统计
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Spin } from 'antd';
import accounting from 'accounting';
import StatisticsCard from './StatisticsCard/StatisticsCard';
import { SecondHeaderC } from '../../../../../comps';
import icon1 from '../../../../../assets/busi/performanceAnalysis/profitOverview/number.png';
import icon2 from '../../../../../assets/busi/performanceAnalysis/profitOverview/inflow.png';
import icon3 from '../../../../../assets/busi/performanceAnalysis/profitOverview/outflow.png';
import icon4 from '../../../../../assets/busi/performanceAnalysis/profitOverview/money.png';
import icon5 from '../../../../../assets/busi/performanceAnalysis/profitOverview/inflow_money.png';
import icon6 from '../../../../../assets/busi/performanceAnalysis/profitOverview/outflow_money.png';
import icon7 from '../../../../../assets/busi/performanceAnalysis/profitOverview/net_money.png';
import icon1R from '../../../../../assets/busi/performanceAnalysis/profitOverview/number_red.png';
import icon2R from '../../../../../assets/busi/performanceAnalysis/profitOverview/inflow_red.png';
import icon3R from '../../../../../assets/busi/performanceAnalysis/profitOverview/outflow_red.png';
import icon4R from '../../../../../assets/busi/performanceAnalysis/profitOverview/money_red.png';
import icon5R from '../../../../../assets/busi/performanceAnalysis/profitOverview/inflow_money_red.png';
import icon6R from '../../../../../assets/busi/performanceAnalysis/profitOverview/outflow_money_red.png';
import icon7R from '../../../../../assets/busi/performanceAnalysis/profitOverview/net_money_red.png';

@connect(({ tradeAnalysisM }) => ({
  tradeAnalysisM,
}))
class TradeStatistics extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      countStat: {},
      loading: false,
    };
  }

  componentDidMount() {
    const { searchData } = this.props;
    if (searchData && searchData.portfolioCode) {
      this.getData({
        portfolioCodeList: JSON.stringify([searchData.portfolioCode]),
        beginDate: searchData.beginDate,
        endDate: searchData.endDate,
      });
    }
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (JSON.stringify(nextProps.searchData) !== JSON.stringify(this.props.searchData)) {
      if (nextProps && nextProps.searchData.portfolioCode) {
        this.getData({
          portfolioCodeList: JSON.stringify([nextProps.searchData.portfolioCode]),
          beginDate: nextProps.searchData.beginDate,
          endDate: nextProps.searchData.endDate,
        });
      }
    }
  }

  formatData(number) {
    return accounting.formatNumber(Number(number), 2);
  }

  // 获取数据
  getData = (searchObj) => {
    this.setState({
      loading: true,
    });
    this.props.dispatch({
      type: 'tradeAnalysisM/getTradeCount',
      payload: {
        ...searchObj,
      },
      callback: (data) => {
        this.setState({
          loading: false,
        });
        if (data) {
          this.setState({
            countStat: data.countStat || {},
          });
        } else {
          this.setState({
            countStat: {},
          });
        }
      },
    });
  };

  render() {
    const { countStat, loading } = this.state;
    const { colorType } = this.props;
    return (
      <div style={{ width: '100%' }}>
        <SecondHeaderC title='交易统计' colorType={colorType} />
        <Spin spinning={loading}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <div style={{ width: '32.666666%' }}>
              <StatisticsCard icon={colorType == 'red' ? icon1R : icon1} title='交易笔数' number={countStat.tradeNum || 0} colorType={colorType} />
            </div>
            <div style={{ width: '32.666666%' }}>
              <StatisticsCard icon={colorType == 'red' ? icon2R : icon2} title='流入笔数' number={countStat.buyNum || 0} colorType={colorType} />
            </div>
            <div style={{ width: '32.666666%' }}>
              <StatisticsCard icon={colorType == 'red' ? icon3R : icon3} title='流出笔数' number={countStat.sellNum || 0} colorType={colorType} />
            </div>
          </div>
          <div style={{ marginTop: '12px', display: 'flex', justifyContent: 'space-between' }}>
            <div style={{ width: '49.5%' }}>
              <StatisticsCard icon={colorType == 'red' ? icon4R : icon4} title='交易金额' number={this.formatData(countStat.tradeAmount || 0)} unit={'元'} colorType={colorType} />
            </div>
            <div style={{ width: '49.5%' }}>
              <StatisticsCard icon={colorType == 'red' ? icon5R : icon5} title='流入金额' number={this.formatData(countStat.buyAmount || 0)} unit={'元'} colorType={colorType} />
            </div>
          </div>
          <div style={{ marginTop: '12px', display: 'flex', justifyContent: 'space-between' }}>
            <div style={{ width: '49.5%' }}>
              <StatisticsCard icon={colorType == 'red' ? icon6R : icon6} title='流出金额' number={this.formatData(countStat.sellAmount || 0)} unit={'元'} colorType={colorType} />
            </div>
            <div style={{ width: '49.5%' }}>
              <StatisticsCard
                icon={colorType == 'red' ? icon7R : icon7}
                title='净流入金额'
                number={this.formatData(countStat.netBuyAmount || 0)}
                unit={'元'}
                colorType={colorType}
              />
            </div>
          </div>
        </Spin>
      </div>
    );
  }
}
export default TradeStatistics;
